<template>
  <section class="our-expertise">
    <div class="container align-vertical" style="padding-top: 0px;">
      <div class="row">
        <div class="col-sm-12 text-center m-b-30">
          <h1>{{ t('expertise')}}</h1>
        </div>
      </div>
      <div class="row">
        <div v-for="item of expertiseImgs">
          <bSkeleton class="col-md-1" :loading="allLoading" width="80px" height="87px" borderRadius="10px">
            <div>
              <img :src="item.url">
            </div>
          </bSkeleton>
          <aSkeleton class="col-md-5" :loading="allLoading" active>
            <div style="min-height:248px" class="col-md-5">
              <h1 class="expertise-title">
                <span>{{t(item.content)}}</span>
                / {{t(`${item.content}0`)}}
              </h1>
              <p class="lead">
                {{t(`${item.content}1`)}}
              </p>
            </div>
          </aSkeleton>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  /** lib **/
  import {
    useI18n
  } from 'vue-i18n'
  /** components **/
  import bSkeleton from '../../../../components/bSkeleton.vue'
  /** logic **/
  import useImgLoading from './img-loading'
  export default {
    components: {
      bSkeleton
    },
    setup() {
      return {
        ...useImgLoading(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "expertise":"专业知识",
  "building": "智能建筑",
  "building0":"管理建筑的能源消耗",
  "building1":"空调、电源、暖气、湿度：连接设备帮助您减少日常开支。",
  "industry":"智能产业",
  "industry0":"使你的制造工具现代化",
  "industry1":"未来的行业今天对你开放：建立正确的工具来提高你的生产力。",
  "city":"智慧城市",
  "city0":"让你的区域更智能",
  "city1":"数字化您的城市，以优化提供的服务和改善内部流程。",
  "data":"开放数据",
  "data0":"启动开放数据策略",
  "data1":"让你的数据公开，让所有人都可以访问，从而参与到开放数据中来。"
  },
  "en": {
  "expertise":"Our expertise",
  "building": "SMART BUILDING",
  "building0":"Manage your buildings' energy consumption",
  "building1":"Air conditioning, power, heating, humidity: connected devices help you reduce your everyday expenses.",
  "industry":"SMART INDUSTRY",
  "industry0":"Modernize your manufacturing tools",
  "industry1":"The Industry of the Future is open to you today: set up the right tools to improve your productivity.",
  "city":"SMART CITY",
  "city0":"Make your area smarter",
  "city1":"Digitize your city to optimize the services offered and improve internal processes.",
  "data":"OPEN DATA",
  "data0":"Start your open data policy",
  "data1":"Get involved with Open Data by making your data public and accessible to all."
  },
  "ja": {
  "expertise":"せんもん ちしき",
  "building": "スマートビル",
  "building0":"建物のエネルギー消費を管理する",
  "building1":"空調、電力、暖房、湿度：接続デバイスは、あなたの毎日の費用を減らすのに役立ちます。",
  "industry":"スマート産業",
  "industry0":"製造ツールの近代化",
  "industry1":"未来の産業は今日あなたに開いている：あなたの生産性を向上させるために適切なツールを設定します。",
  "city":"スマートシティ",
  "city0":"あなたの領域スマート",
  "city1":"サービスを最適化し、内部プロセスを改善するためにあなたの街をデジタル化します。",
  "data":"オープンデータ",
  "data0":"オープンデータポリシーを開始する",
  "data1":"あなたのデータを公開し、すべてにアクセスできるようにオープンデータに関与する。"
  }
  }
</i18n>

<style scoped>
  section:nth-of-type(odd) {
    background: #f4f4f4;
  }

  section {
    padding-top: 80px;
    position: relative;
    overflow: hidden;
  }

  .our-expertise .row {
    margin-bottom: 30px;
  }

  .m-b-30 {
    margin-bottom: 30px;
  }

  .accueil section h1,
  .home section h1 {
    margin-bottom: 12px;
  }

  .our-expertise img {
    max-width: 80px;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
    height: auto;
  }

  .our-expertise .row .col-md-5 {
    /* padding-left: 60px; */
  }

  .our-expertise h1.expertise-title {
    margin-top: 0;
    font-size: 24px;
    line-height: 32px;
  }

  .our-expertise h1 span {
    font-weight: 800;
    color: #14CC71;
  }

  p.lead {
    font-size: 16px;
    line-height: 30px;
    font-weight: normal;
    padding-bottom: 18px;
  }
</style>